<template>
<!-- Site wrapper -->
<div class="wrapper">
  <app-header></app-header>
  <!-- Left side column. contains the sidebar -->
  <app-sidebar></app-sidebar>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <slot>
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          Blank page
          <small>it all starts here</small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
          <li><a href="#">Examples</a></li>
          <li class="active">Blank page</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">

        <!-- Default box -->
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">Title</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
                      title="Collapse">
                <i class="fa fa-minus"></i></button>
              <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                <i class="fa fa-times"></i></button>
            </div>
          </div>
          <div class="box-body">
            Start creating your amazing application!
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            Footer
          </div>
          <!-- /.box-footer-->
        </div>
        <!-- /.box -->

      </section>
      <!-- /.content -->
    </slot>
  </div>
  <!-- /.content-wrapper -->

  <app-footer></app-footer>
  <app-control-sidebar></app-control-sidebar>

  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
</template>

<script>
import Header from "@/components/common/Header";
import Sidebar from "@/components/common/Sidebar";
import Footer from "@/components/common/Footer";
import ControlSidebar from "@/components/common/ControlSidebar";

export default {
  components: {
    "app-header": Header,
    "app-sidebar": Sidebar,
    "app-footer": Footer,
    "app-control-sidebar": ControlSidebar,
  },
  data() {
    return {};
  },
  mounted: function() {
    $("body").addClass("hold-transition skin-blue sidebar-mini");
  }
};
</script>
